/*
 * @Author: yangzonglong
 * @Date: 2021-03-03 14:44:59
 * @version: v1.0.0
 * @Descripttion: Col 控制器
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-03-22 20:29:55
 * @Auditor: 
 */
import React, { useState, useEffect } from 'react';
import { Form, InputNumber, Checkbox, Input } from 'antd';
import { Select } from '@library';
import FormItemController from './../components/FormItemController';
import useControlOptions from '../../hooks/useControlOptions';
import { InputNumberProps } from './InputNumber';
import useFdStore from '../../hooks/useFdStore';
import { regExpSource } from '../../config';
import { flatControl, uniqueFunc } from './../../util';

const FormItem = Form.Item;
const ftStyle = { marginBottom: '8px' };
const fieldNames = { label: 'label', value: 'value' };
const linkType = ['dataLink', 'dataLinkComBox'];
const selectOptions = [{
  value: 'label',
  label: 'label',
}, {
  value: 'value',
  label: 'value',
}];
let dataObj: any = {};

const Controller = () => {
  const {
    state: { list },
  } = useFdStore();

  const { options, changeFormItemProps, changeControlProps } = useControlOptions<InputNumberProps>('inputProps');

  const [componentsArray, setComponentsArray] = useState<any[]>([]);

  useEffect(() => {
    const flatList = flatControl(list);
    let _list = flatList?.filter((item) => linkType.includes(item.type));
    let _select = flatList?.filter((item) => item.type === 'select');

    setComponentsArray(_list?.concat(_select || [])?.map((item) => ({ label: item?.options?.formItemProps?.label, value: item?.options?.formItemProps?.name })));

    _select?.forEach((element) => {
      dataObj[element?.options?.formItemProps?.name] = selectOptions;
    });

    _list?.forEach((element) => {
      const filedShowName = element?.options?.inputProps?.filedShowName;
      const extraFieldName = element?.options?.inputProps?.extraFieldName || [];
      let bindArr = filedShowName ?
        (typeof filedShowName === 'string' ? [{
          value: filedShowName,
          label: filedShowName,
        }, ...extraFieldName] : (filedShowName?.concat(extraFieldName))) : [];

      bindArr = uniqueFunc(bindArr, 'value');

      dataObj[element?.options?.formItemProps?.name] = bindArr;
    });

  }, [list]);

  return (
    <>
      <FormItemController
        showTextAlign
        placeholder={options.inputProps?.placeholder}
        placeholderEn={options.inputProps?.placeholderEn}
        onChangePlaceholder={e => changeControlProps(
          'inputProps',
          { ...options.inputProps, placeholder: e },
          true
        )}
        onChangePlaceholderEn={e => changeControlProps(
          'inputProps',
          { ...options.inputProps, placeholderEn: e },
          true
        )}
        onChange={changeFormItemProps}
        options={options?.formItemProps} >

        <FormItem className="antd-form-item-row" label="显示提示信息">
          <Checkbox
            checked={options?.formItemProps?.showTooltip}
            onChange={(e) => changeFormItemProps('showTooltip', e.target.checked)} />
        </FormItem>
        {options?.formItemProps?.showTooltip && (
          <>
            <FormItem label="提示信息">
              <Input.TextArea
                placeholder='请输入'
                onChange={(e) => changeFormItemProps('tooltip', e.target.value)}
                value={options?.formItemProps?.tooltip} />
            </FormItem>
            <FormItem label="提示信息(EN)">
              <Input.TextArea
                placeholder='请输入'
                onChange={(e) => changeFormItemProps('tooltipEn', e.target.value)}
                value={options?.formItemProps?.tooltipEn} />
            </FormItem>
            <FormItem label="自定义宽度">
              <Input
                suffix={<span>PX</span>}
                placeholder='请输入'
                value={options?.formItemProps?.tooltipWidth}
                onChange={(e) => {
                  if (!isNaN(Number(e.target.value))) {
                    changeFormItemProps('tooltipWidth', Number(e.target.value));
                  }
                }} />
            </FormItem>
          </>
        )}

        <FormItem label="校验规则">
          <Select
            value={options?.formItemProps?.checkRule as string}
            allowClear
            dataSource={regExpSource}
            onClear={() => changeFormItemProps('checkRule', undefined)}
            onSelect={(e: any) => changeFormItemProps('checkRule', e)}
            fieldNames={fieldNames}
            url=""
            placeholder="请选择校验规则"
          />
        </FormItem>

        <FormItem label="关联已有数据">
          <FormItem>
            <Select
              allowClear
              dataSource={componentsArray}
              onClear={() => changeControlProps(
                'inputProps',
                { ...options.inputProps, bindName: undefined, showFiled: undefined },
                true
              )}
              style={ftStyle}
              value={options.inputProps?.bindName}
              onSelect={(e: any) => changeControlProps(
                'inputProps',
                { ...options.inputProps, bindName: e, showFiled: undefined },
                true
              )}
              fieldNames={fieldNames}
              url=""
              placeholder="请选择组件"
            />
          </FormItem>
          <FormItem>
            <Select
              style={ftStyle}
              value={options.inputProps?.showFiled}
              onSelect={(e: any) => changeControlProps(
                'inputProps',
                { ...options.inputProps, showFiled: e },
                true
              )}
              dataSource={dataObj?.[options?.inputProps?.bindName!] || []}
              fieldNames={fieldNames}
              url=""
              placeholder="请选择显示字段"
            />
          </FormItem>
        </FormItem>

        <FormItem className="antd-form-item-row" label="格式化金额">
          <Checkbox onChange={(e) => changeControlProps(
            'inputProps',
            { ...options.inputProps, formatterMoney: e.target.checked },
            true
          )} checked={options?.inputProps?.formatterMoney} />
        </FormItem>

        <FormItem className="antd-form-item-row" label="隐藏增减键">
          <Checkbox onChange={(e) => changeControlProps(
            'inputProps',
            { ...options.inputProps, hideArrow: e.target.checked },
            true
          )} checked={options?.inputProps?.hideArrow} />
        </FormItem>

        <FormItem label='最小值'>
          <InputNumber
            onChange={(e) => changeControlProps(
              'inputProps',
              { ...options.inputProps, min: e },
              true
            )}
            value={options?.inputProps?.min} />
        </FormItem>

        <FormItem label='最大值'>
          <InputNumber
            onChange={(e) => changeControlProps(
              'inputProps',
              { ...options.inputProps, max: e },
              true
            )}
            value={options?.inputProps?.max} />
        </FormItem>

        <FormItem label='步数' tooltip='加减步数'>
          <InputNumber
            onChange={(e) => changeControlProps(
              'inputProps',
              { ...options.inputProps, step: e },
              true
            )}
            value={options?.inputProps?.step as number} />
        </FormItem>

        <FormItem label='数值精度' tooltip='保留几位小数'>
          <InputNumber
            onChange={(e) => changeControlProps(
              'inputProps',
              { ...options.inputProps, precision: e },
              true
            )}
            value={options?.inputProps?.precision} />
        </FormItem>

        <Form.Item label="前辍" >
          <Input
            value={options.inputProps?.prefix}
            onChange={e => {
              changeControlProps(
                'inputProps',
                { ...options.inputProps, prefix: e.target.value },
                true
              );
            }} />
        </Form.Item>

      </FormItemController>
    </>
  );
};

export default Controller;